<!-- 盲盒 -->
<template>
  <div class="run">
    <NavBar :fnTitle="title"></NavBar>
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <div class="GetBox">
        <button class="btn_get" @click="GetAll">分享盲盒</button>
        <button class="btn_get" @click="GetBox">随机抽取</button>
      </div>

      <!-- 信息展示 -->
      <div class="info_show" :data="tableData" v-for="item in tableData" :key="item.id">
        <div class="photo">
          <img
            src="https://gitee.com/xiao-ershi/img/raw/master/%E5%9B%BE%E5%B1%82%2011%20%E6%8B%B7%E8%B4%9D.png"
            alt=""
          />
        </div>
        <div class="top">
          <br />
          <br />
          <van-row>
            <van-col offset="3" span="24"> {{ item.text }} </van-col>
          </van-row>
          <br />
          <van-row>
            <van-col offset="2" span="9">开始：{{ item.created_at }}</van-col>
            <van-col offset="2" span="9"> 结束：{{ item.updated_at }} </van-col>
          </van-row>
        </div>
        <div class="bottom">
          <button class="btn btn_left" @click="showPopup(item.picture_id)">查看</button>
          <button class="btn btn_right" @click="share(item)">分享</button>
        </div>

        <!-- 弹出层 -->
        <van-popup :data="photo" v-model="show" :style="{ width: '80%' }">
          <van-form>
            <div class="gifttext"><p>盲盒惊喜</p></div>
            <img :src="photo.one" alt="" width="100%" />
            <img :src="photo.two" alt="" width="100%" />
            <div style="margin: 16px">
              <van-button round block type="info" @click="showPopclose">关闭</van-button>
            </div>
          </van-form>
        </van-popup>
      </div>
    </van-pull-refresh>
  </div>
</template>

<script>
import NavBar from '@/components/NavBar'
import Vue from 'vue'
import { Dialog } from 'vant'
Vue.use(Dialog)

import { Toast } from 'vant'
export default {
  created() {
    this.GetAll()
  },
  data() {
    return {
      title: '盲盒',
      tableData: [],
      photo: {
        one: '',
        two: ''
      },
      show: false, // 弹出层
      location: '',

      // 下拉刷新
      count: 0,
      isLoading: false
    }
  },
  components: {
    NavBar,
    [Dialog.Component.name]: Dialog.Component
  },
  methods: {
    // 获取所有盲盒显示
    async GetAll() {
      const { data: res } = await this.$http.get('/api/box/showall')

      if (res.code !== 200) {
        //  console.log('获取用户列表失败！')
      }
      this.tableData = res.data
      // console.log(typeof(this.tableData));
      // console.log(res);
    },

    // 随机获取盲盒
    async GetBox() {
      const { data: res } = await this.$http.get('/api/box/show')
      if (res.code !== 200) {
        // console.log('获取用户列表失败！')
      }
      // console.log(res);
      this.tableData = []
      this.tableData[0] = res.data
      // console.log(this.tableData);
    },

    // 下拉刷新
    onRefresh() {
      setTimeout(() => {
        Toast('刷新成功')
        this.isLoading = false
        this.count++
        this.GetAll()
      }, 1000)
    },
    // 弹出层
    showPopup(val) {
      this.show = true
      this.GetPhoto(val)
    },
    showPopclose() {
      this.show = false
    },
    // 查看照片接口调用
    async GetPhoto(val) {
      //  console.log(val);
      const { data: res } = await this.$http({
        method: 'post',
        url: '/api/picture/show',
        data: this.$qs.stringify({
          // 这里是发送给后台的数据
          picture_id: val
        })
      })
      if (res.code !== 200) {
        // console.log(res);
        return
      }

      this.photo = res.data[0]
      // console.log(this.photo.one);
      // console.log(res);
    },
    // 分享确定弹窗
    share(val) {
      // console.log(val);
      this.$dialog
        .alert({
          title: '分享', // 加上标题
          message: '确认分享？', // 改变弹出框的内容
          showCancelButton: true // 展示取消按钮
        })
        .then(() => {
          // 点击确认按钮后的调用
          this.ShareGift(val)
        })
        .catch(() => {
          // 点击取消按钮后的调用
          // console.log("点击了取消按钮噢")
        })
    },
    // 分享接口调用
    async ShareGift(val) {
      console.log(val)
      console.log(val.text)
      console.log(val.picture_id)
      var token = sessionStorage.getItem("token")
      const { data: res } = await this.$http({
        method: 'post',
        url: '/api/box/share',
        data: this.$qs.stringify({
          // 这里是发送给后台的数据
          text: val.text,
          picture_id: val.picture_id,
          token: token
        })
      })
      if (res.code !== 200) {
        // console.log(res);
        return
      }
      alert('分享成功')
      // console.log(res);
    }
  }
}
</script>

<style scoped>
.gifttext {
  text-align: center;
  font-size: 20px;
  font-weight: 600;
}
.GetBox {
  text-align: center;
}
.btn_get {
  margin-top: 1%;
  border: 1px solid #fff;
  border-radius: 20px;
  background-color: rgb(218, 68, 130);
  color: #fff;
  width: 80px;
  height: 30px;
}
.photo {
  position: absolute;
  left: 45%;
  margin-bottom: -15px;
  background-color: white;
  border-radius: 50px;
  padding-bottom: 2px;
  width: 40px;
  height: 30px;
  text-align: center;
}
.info_show {
  width: 80%;
  margin: 0 auto;
  margin-top: 10%;
}
.top {
  height: 100px;
  background-color: rgb(218, 68, 130);
}
.bottom {
  background-color: rgba(218, 218, 218, 0.247);
  text-align: center;
  height: 40px;
}
.btn {
  margin-top: 1%;
  border: 1px solid #fff;
  border-radius: 20px;
  background-color: rgb(218, 68, 130);
  color: #fff;
  width: 60px;
  height: 30px;
}
.btn_left {
  float: left;
}
.btn_right {
  float: right;
}
.show {
  margin-top: 0.4rem;
}
</style>
